<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite App</title>
</head>

<body>
  <script src="./src/vue.js"></script>


  <!--创建一个 Vue 实例-->
  <!-- <script>
    var vm = new Vue({
      // 选项
    })
  </script> -->





  <!--数据与方法-->
  <!-- <div id="app01">{{a}}</div>
  <script>
    // 我们的数据对象
    var data = { a: 1 }

    // 该对象被加入到一个 Vue 实例中
    var vm = new Vue({
      el: '#app01',
      data: data
    })
    console.info("vm.a == data.a=>" + (vm.a == data.a)) // => true
    //设置 property 也会影响到原始数据
    vm.a = 2
    console.info("data.a=>" + data.a)
    // ……反之亦然
    data.a = 3
    console.info("vm.a=>" + vm.a)
  </script> -->

  <!--使用 Object.freeze()，这会阻止修改现有的 property，也意味着响应系统无法再追踪变化-->
  <!-- <div id="app">
    <p>{{ foo }}</p>
    <button v-on:click="foo = 'baz'">Change it</button>
  </div>
  <script>
    var obj = {
      foo: 'bar'
    }
    Object.freeze(obj)
    var vm=new Vue({
      el: '#app',
      data: obj
    })    
  </script> -->

  <!--Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $，以便与用户定义的 property 区分开来-->
  <!-- <script>
    var data = { a: 1 }
    var vm = new Vue({
      el: '#example',
      data: data
    })
    vm.$data === data // => true
    vm.$el === document.getElementById('example') // => true
    // $watch 是一个实例方法
    vm.$watch('a', function (newValue, oldValue) {
      // 这个回调将在 `vm.a` 改变后调用
    })    
  </script> -->



  <!--实例生命周期钩子-->
  <script>
    new Vue({
      data: {
        a: 1
      },
      created: function () {
        // `this` 指向 vm 实例
        console.log('a is: ' + this.a)
      }
    })    
  </script>
</body>

</html>